<template>
  <!-- 菜单 -->
  <n-space :justify="$cfg.mobile ? 'center' : 'center'">
    <template v-if="$cfg.mobile">
      <n-space align="center" justify="center">
        <n-button @click="data.act = true" :size="$cfg.sizebtn" type="success"
          >菜单目录</n-button
        >
        <!-- 功能下拉菜单 -->
        <n-popselect
          :size="data.btn"
          trigger="click"
          v-if="data.clickdata.n_name != null"
        >
          <n-button :size="$cfg.sizebtn" type="warning">功能</n-button>
          <template #empty>
            <div class="m-empty">
              <a
                :href="`https://gtimg.ww2.ren/?file=${data.clickdata.img}&w=2500`"
                target="_blank"
                ><div class="_btn">查看大图</div></a
              >

              <div class="_btn" @click="data.md_edit_dir = true">编辑目录</div>
              <div class="_btn" @click="data.md_edit_data = true">编辑攻略</div>
              <n-popconfirm
                @positive-click="data.del(data.clickdata)"
                positive-text="删除"
                negative-text="取消捏"
              >
                <template #trigger>
                  <div class="_btn">删除攻略</div>
                </template>
                要删除吗？
              </n-popconfirm>
              <n-hr />
              <div class="_btn" v-for="item in data.nav" @click="item.click">
                {{ item.name }}
              </div>
            </div>
          </template>
        </n-popselect>
      </n-space>
    </template>
    <!-- pc -->
    <template v-else>
      <n-space align="center" justify="center">
        <a
          v-if="data.clickdata.img"
          :href="`https://gtimg.ww2.ren/?file=${data.clickdata.img}&w=2500`"
          target="_blank"
          ><n-button>查看大图</n-button></a
        >
        <!-- 功能下拉菜单 -->
        <n-popselect v-if="data.clickdata.img" :size="data.btn" trigger="click">
          <n-button :size="data.btn" type="warning">编辑功能</n-button>
          <template #empty>
            <div class="m-empty">
              <template v-if="$cfg.function.ckqx('idc') == true">
                <div class="_btn" @click="data.md_edit_dir = true">编辑目录</div>
                <div class="_btn" @click="data.md_edit_data = true">编辑攻略</div>
                <n-popconfirm
                  @positive-click="data.del(data.clickdata)"
                  positive-text="删除"
                  negative-text="取消捏"
                >
                  <template #trigger>
                    <div class="_btn">删除攻略</div>
                  </template>
                  要删除吗？
                </n-popconfirm>
              </template>
              <template v-else><a style="color: var(--n-text-color)">无权限</a></template>
            </div>
          </template>
        </n-popselect>
      </n-space>
    </template>
  </n-space>
  <n-hr />
  <!-- 标题 -->
  <n-space justify="center">
    <n-h1 style="margin: 0">{{ data.clickdata.n_dir }} {{ data.clickdata.n_name }}</n-h1>
  </n-space>
  <n-space justify="center">
    <span v-if="data.clickdata.img">作者：{{ data.clickdata.by }}</span>
  </n-space>
  <br />
  <!-- 内容 -->
  <n-space justify="center">
    <el-image
      v-if="data.clickdata.img"
      style="max-width: 100%"
      :src="`https://gtimg.ww2.ren/?file=${data.clickdata.img}&w=1000`"
      :fit="fit"
    >
      <template #placeholder>
        <div class="image-slot">加载中<span class="dot">...</span></div>
      </template>
    </el-image>
  </n-space>
</template>
<script>
export default {
  props: {
    data: {
      required: true,
    },
  },
  setup(props) {
    return {
      data: props.data,
    };
  },
};
</script>
